<template>
	<div title="shouye">
		<input type="text" placeholder="姓名" v-model="list.name" />

		<input type="text" placeholder="学号" v-model="list.xh" />

		<input type="text" placeholder="学制" v-model="list.xz" />

		<input type="text" placeholder=" 市场部" v-model="list.scb" />

		<button @click="add1">保存</button>
		<ul>
			<li>姓名</li>
			<li>学号</li>
			<li>学制</li>
			<li>市场部</li>
            <li>操作</li>
		</ul>
		<ul class="ul" v-for="(item, index) in tokeed" :key="index">
			<li class="li1">
				{{ item.name }}
			</li>
			<li class="li1">
				{{ item.xh }}
			</li>
			<li class="li1">
				{{ item.xz }}
			</li>
			<li class="li1">
				{{ item.scb }}
                
			</li>
          <li><button @click="del1(index)">删除</button></li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: {
				name: '', 
				xh: '', 
				xz: '', 
				scb: '', 
			},
			end: [], 
			tokeed: '',
		}
	},
	mounted() {
		this.tokeed = JSON.parse(window.localStorage.getItem('user'))
	},
	methods: {
		add1() {
			if (
				this.list.name == '' ||
				this.list.xh == '' ||
				this.list.xz == '' ||
				this.list.scb == ''
			) {
				alert('填写完整')
			} else {
				this.end.push(this.list)
				if (window.localStorage.getItem('user')) {
					let endos = JSON.parse(
						window.localStorage.getItem('user')
					).concat(this.end)
					window.localStorage.setItem('user', JSON.stringify(endos))
                    this.tokeed=endos
				} else {
					window.localStorage.setItem(
						'user',
						JSON.stringify(this.end)
					)
                   
				}
			}
		},
        del1(index){
              this.$confirm('你确定删除', '警告', {
        confirmButtonText: 'ok',
        cancelButtonText: 'on',
        type: '警告'
      })
        .then(async() => {
          let abc=JSON.parse(window.localStorage.getItem('user'))
            let res = abc.splice(index,1)
            window.localStorage.setItem('user', JSON.stringify(abc))
           this.tokeed=abc
          this.$message({
            type: 'success',
            message: 'Delete succed!'
          })
        })
        .catch(err => { console.error(err) })
        }
   
	},
}
</script>

<style>
* {
	list-style: none;
	margin: 0;
	padding: 0;
}
input{
  width: 100px;
	height: 50px;
	border:1px solid red;
  
}
.ul {
	width: 600px;
	height: 100%;
}
li {
	width: 100px;
	height: 20px;
	border:1px solid red;
	float: left;
	text-align: center;
	color: black;
}
.li{
  width: 100px;
	height: 20px;
	border:1px solid red;
}
</style>
